Bootstrap Snippet Grid hover effect using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="owner">
<h2>Ashwani</h2>
</div>
<div class="popular-content text-center">
            <div class="visit">
               <div class="container">
                  <div class="tor-hover">
                     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="toronto-content">
                           <div class="toronto">
                              <img src="http://mysavvysisters.com/wp-content/uploads/2014/02/two-glass-of-beer-wallpaper-370x230.jpg" alt="toronto view" class="image"/>
                              <div class="overlay1">
                                 <div class="text">
                                    <button type="button">BOOK NOW</button>
                                 </div>
                              </div>
                           </div>
                           <div class="tor-box">
                              <h3>TORONTO</h3>
                              <div class="rating">
                                 <span class="fa fa-star color"></span>
                                 <span class="fa fa-star color"></span>
                                 <span class="fa fa-star color"></span>
                                 <span class="fa fa-star color"></span>
                                 <span class="fa fa-star color1"></span>
                              </div>
                              <div class="toronto-border"></div>
                              <span class="duration">During: 2 Hours </span>
                              <span class="opening">Opening:8Am - 10Am</span>
                           </div>
                        </div>
                     </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.owner h2{ text-align:center; color:#2f2f2f; font-weight:600; font-size:60px; }
.popular-content h1{font-weight:600; margin-bottom:20px;}
.popular-content {text-align: center;float:left; width:100%; margin-top:60px;}
.popular-content p{font-size:18px; font-style:italic;font-family:'Playfair Display'; margin-bottom:30px;}  
.visit{float:left; width:100%;  margin-top:80px;}
.tor-box h3{font-weight:600; font-size:24px; line-height:26px;    margin: 20px 0 15px 0;}
.color{color:#f4b843;}
.color1{color:#eee;}
.toronto-border{width:56px; height:1px; background:#e7e7e7; display:block; margin:20px auto;}
.duration,.opening{font-size:17px; display:block; font-family:myriad pro; padding-bottom:5px; color:#555555;}
.opening {padding-bottom:40px;}
.tor-hover {
  position: relative;
  width: 100%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay1 {
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color:rgba(0, 0, 0, 0.47);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .3s ease;
}
.tor-hover:hover .overlay1 {
  bottom: 45%;
  height: 55%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Grid hover effect"
Bootstrap 3.0.0 Snippet by Ashwani Rawat

Related: See More

Questions / Comments:

"Grid hover effect" Bootstrap 3.0.0 Snippet by Ashwani Rawat

Related: See More

Questions / Comments:

"Grid hover effect"
Bootstrap 3.0.0 Snippet by Ashwani Rawat